<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="create">创建li</button>
    <button id="change">变色</button>
    <script>
         create.onclick = function () {
        var oBox = document.getElementById("box")
        for (var i = 0; i < 5; i++) {
            var oList = document.createElement("li")
            oBox.append(oList)
            
            oList.style.cssText = `width:200px;height:20px;line-height:20px;background-color:red;margin-top:10px;`
            
        }
        
    }
    change.onclick = function () {
      var oBox = document.getElementById("box")
        console.log(oBox.children)
        for (var j = 0; j < oBox.children.length; j++) {
            if (j % 2 === 0) {
                oBox.children[j].style.backgroundColor = "blue";
            } else {
                oBox.children[j].style.backgroundColor = "yellow";
            }

        }
    }
    </script>
</body>
</html>